import React from "react";
import { Spin, Button, Icon } from "antd";
import Condition from "components/condition";
import { eventTrack, messages } from "share/common";

import NullCard from "containers/dashboard/dashboard-component/null-card";
import thirdConsumptionService from "containers/third-consumption/third-consumption.service";
import { message } from "antd/lib/index";
import "styles/dashboard/business-travel.scss";
import menuRoute from "routes/menuRoute";
import reserveImg from "images/dashboard/refactor/reserve.png";
import orderImg from "images/dashboard/refactor/order.png";

const { If, Else } = Condition;

const tip1 = messages("basic-1.key199"); /*您当前没有可通过PC端使用的商旅消费商*/
const tip2 = messages("basic-1.key200"); /*如需要，请联系公司管理员添加*/
const tip3 = messages("basic-1.key201"); /*一站式差旅解决方案*/
const tip4 = messages("basic-1.key295"); /*暂未开通国际商务出行服务*/

class BusinessTravel extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      load: false,
      vendorList: [],
      vendorOrderList: [],
      internationalSite: window.location.origin.indexOf("console-my.huilianyi.com") !== -1,
    };
  }

  componentWillMount() {
    if (!this.state.internationalSite) {
      this.getThirdConsumption();
      this.getThirdOrderConsumption();
    }
  }

  getThirdConsumption = () => {
    this.setState({ load: true });
    const hideInUrl =
      window.location.href.indexOf("console-my.huilianyi.com") === -1 &&
      window.location.href.indexOf("console-sg.huilianyi.com") === -1;
    hideInUrl &&
      thirdConsumptionService
        .getThirdConsumptionList()
        .then((res) => {
          let vendorList = [];
          res.data &&
            res.data.map((item) => {
              item.venItems.length &&
                item.venItems.map((vendorItem) =>
                  vendorItem.vendorName && vendorItem.vendorName.indexOf(item.venName) === -1
                    ? (vendorItem.vendorName += item.venName)
                    : vendorItem.vendorName
                );
              vendorList = vendorList.concat(item.venItems);
            });
          this.setState({ vendorList, load: false });
        })
        .catch(() => {
          message.error(messages("common.error1") /*获取数据失败，请稍后重试或联系管理员*/);
        });
  };

  getThirdOrderConsumption = () => {
    this.setState({ load: true });
    const hideInUrl =
      window.location.href.indexOf("console-my.huilianyi.com") === -1 &&
      window.location.href.indexOf("console-sg.huilianyi.com") === -1;
    hideInUrl &&
      thirdConsumptionService
        .getThirdConsumptionListOrder()
        .then((res) => {
          let vendorOrderList = [];
          res.data &&
            res.data.map((item) => {
              item.venItems.length &&
                item.venItems.map((vendorItem) =>
                  vendorItem.vendorName && vendorItem.vendorName.indexOf(item.venName) === -1
                    ? (vendorItem.vendorName += item.venName)
                    : vendorItem.vendorName
                );
              vendorOrderList = vendorOrderList.concat(item.venItems);
            });
          this.setState({ vendorOrderList, load: false });
        })
        .catch(() => {
          message.error(messages("common.error1") /*获取数据失败，请稍后重试或联系管理员*/);
        });
  };

  handleClickVenItem = (loginUrl) => {
    const windowReference = window.open(); //chrome会阻止在异步调用中进行的window.open()调用
    thirdConsumptionService.thirdConsumptionLogin(loginUrl).then((res) => {
      windowReference.location = res.data.url;
    });
    eventTrack({
      category: "1218-新首页-埋点",
      action: "点击了【商务出行】进入了消费商页面",
      label: this.props.tenant.tenantName,
    });
  };

  goToOpen = () => {
    this.context.router.push(menuRoute.getRouteItem("consumer-card-list", "key").url);
  };

  render() {
    const { load, vendorList, vendorOrderList, internationalSite } = this.state;
    const { menuTree, uniKey, enableDrag } = this.props;
    return (
      <div id={`home-${uniKey}`} data-id={`home-${uniKey}`} className="supplier-card one-third-width">
        <Spin spinning={load}>
          <div className="title-and-all">
            <div className="home-title">{messages("basic-1.key105") /*商务出行*/}</div>
            <div
              className="view-all"
              onClick={() => {
                this.context.router.push(menuRoute.getRouteItem("third-consumption", "key").url);
              }}
            >
              {!internationalSite && messages("basic-1.key126") /*查看全部*/}
            </div>
          </div>
          <div className="card-content">
            <Condition>
              <If value={(vendorList.length || load) && !internationalSite}>
                {vendorList && vendorList.length !== 0 && (
                  <div>
                    <div className="type-line">
                      <div className="img-box">
                        <img src={reserveImg} className="img" />
                      </div>
                      <span className="order-sub-text">{messages("basic-1.key202") /*线上预定*/}</span>
                    </div>
                    <div className="third-consumption-content">
                      {vendorList.map((vendor, index) => (
                        <div
                          className="vendor-item"
                          onClick={() => this.handleClickVenItem(vendor.loginUrl)}
                          key={`venItem-${index}`}
                        >
                          <div className="content-box">
                            <div className="img-box">
                              <img className="img" src={vendor.vendorIco} />
                            </div>
                            <div className="vendor-name">{vendor.vendorName}</div>
                          </div>
                          <div className="triangle-box">
                            <span className="order-text"> {messages("basic-1.key203") /*预定*/}</span>
                            <Icon className="right-angle" type="right" />
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                )}
                {vendorOrderList && vendorOrderList.length !== 0 && (
                  <div>
                    <div className="type-line">
                      <div className="img-box">
                        <img src={orderImg} className="img" />
                      </div>
                      <span className="order-sub-text">{messages("basic-1.key26") /*查看订单*/}</span>
                    </div>
                    <div className="third-consumption-content">
                      {vendorOrderList.map((vendor, index) => (
                        <div
                          className="vendor-item"
                          onClick={() => this.handleClickVenItem(vendor.loginUrl)}
                          key={`venItem-${index}`}
                        >
                          <div className="content-box">
                            <div className="img-box">
                              <img className="img" src={vendor.vendorIco} />
                            </div>
                            <div className="vendor-name">{vendor.vendorName}</div>
                          </div>
                          <div className="triangle-box">
                            <span className="order-text"> {messages("common.view") /*查看*/}</span>
                            <Icon className="right-angle" type="right" />
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                )}
              </If>
              <Else>
                <NullCard
                  top={40}
                  imgType={"unOpened"}
                  message={internationalSite ? tip4 : menuTree.keyUrl["consumer-card-list"] ? tip3 : `${tip1}\n${tip2}`}
                  onClick={this.goToOpen}
                  btnMessage={
                    menuTree.keyUrl["consumer-card-list"] && !internationalSite
                      ? messages("basic-1.key204") /*前往开通*/
                      : ""
                  }
                />
              </Else>
            </Condition>
          </div>
          {enableDrag && <div className="toggle-drag-box" />}
        </Spin>
      </div>
    );
  }
}

BusinessTravel.propTypes = {
  removeModule: React.PropTypes.func.isRequired,
};

BusinessTravel.contextTypes = {
  router: React.PropTypes.object,
};

BusinessTravel.defaultProps = {};

export default BusinessTravel;
